<template>
  <div>
       <a-form :form="form" class="form">
    <a-card :bordered="false" title="商办提供">
     
        <a-row class="form-row">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item label="商办名称">
              <a-input
                placeholder="商办名称"
                type="textarea"
                v-decorator="[
                  'name',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入公司名称',
                        trigger: 'blur',
                      },
                      { max: 255, message: '不得超过255个字符' },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xl="{ span: 6, offset: 2 }"
            :lg="{ span: 8 }"
            :md="{ span: 12 }"
            :sm="24"
          >
            <a-form-item label="电话(中介/业主)">
             <a-input
                placeholder="电话(中介/业主)"
                type="textarea"
                v-decorator="[
                  'phone',
                  {
                    rules: [
                      { max: 255, message: '不得超过255个字符' },
                    ],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xl="{ span: 8, offset: 2 }"
            :lg="{ span: 10 }"
            :md="{ span: 24 }"
            :sm="24"
          >
            <a-form-item label="提供人">
              <a-input
                placeholder="提供人"
                type="textarea"
                v-decorator="[
                  'provide',
                  {
                    rules: [{ max: 255, message: '不得超过255个字符' }],
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>



       
     

      <collection-create-form
        ref="collectionForm"
        :visible="visible"
        @cancel="handleCancel"
        @create="handleCreate"
      />
    </a-card>

    <a-card
      class="card"
      :title="'工商手机号'"
      :bordered="false"
      style="margin-top: 20px"
    >
      <FormEdit ref="phoneMessage" :columns_="phoneMessageColumns"></FormEdit>
    </a-card>
    <a-card
      class="card"
      :title="'年报电话'"
      :bordered="false"
      style="margin-top: 20px"
    >
      <FormEdit ref="annalsPhone" :columns_="annalsPhoneColumn"></FormEdit>
    </a-card>
    <a-card
      class="card"
      :title="'年报邮箱'"
      :bordered="false"
      style="margin-top: 20px"
    >
      <FormEdit ref="annalsEmail" :columns_="annalsEmailColumn"></FormEdit>
    </a-card>


    <a-card
      class="card"
      :title="'沟通跟进情况'"
      :bordered="false"
      style="margin-top: 20px"
    >
      <FormEdit ref="followUp" :columns_="followUpColumn"></FormEdit>
    </a-card>


  </a-form>
    <footer-tool-bar>
      <a-button type="primary" @click="validate" :loading="loading2"
        >提交</a-button
      >
    </footer-tool-bar>
   
  </div>
</template>

<script>

const phoneMessageColumns = [
  {
    title: "工商手机号",
    dataIndex: "phone",
    key: "phone",
    width: "20%",
    scopedSlots: { customRender: "phone" },
  },
  {
    title: "查微信名称",
    dataIndex: "wechatName",
    key: "wechatName",
    width: "20%",
    scopedSlots: { customRender: "wechatName" },
  },
  {
    title: "加微信情况",
    dataIndex: "situation",
    key: "situation",
    width: "30%",
    scopedSlots: { customRender: "situation" },
  },
  {
    title: "角色",
    dataIndex: "character",
    key: "character",
    width: "10%",
    scopedSlots: { customRender: "character" },
  },
];

const annalsPhoneColumn = [
  {
    title: "电话号码",
    dataIndex: "phone",
    key: "phone",
    width: "80%",
    scopedSlots: { customRender: "phone" },
  },
];

const annalsEmailColumn = [
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email",
    width: "80%",
    scopedSlots: { customRender: "email" },
  },
];

const followUpColumn = [
  {
    title: "日期",
    dataIndex: "date",
    dateType:"date",
    key: "date",
    width: "20%",
    scopedSlots: { customRender: "date" },
  },
  {
    title: "跟进情况",
    dataIndex: "remark",
    dateType:"textarea",
    key: "remark",
    width: "60%",
    scopedSlots: { customRender: "remark" },
  },
];





// const columns = [
//   {
//     title: '成员姓名',
//     dataIndex: 'name',
//     key: 'name',
//     width: '20%',
//     scopedSlots: { customRender: 'name' }
//   },
//   {
//     title: '工号',
//     dataIndex: 'number',
//     key: 'number',
//     width: '20%',
//     scopedSlots: { customRender: 'number' }
//   },
//   {
//     title: '所属部门',
//     dataIndex: 'department',
//     key: 'department',
//     width: '40%',
//     scopedSlots: { customRender: 'department' }
//   }
//   // {
//   //   title: '操作',
//   //   key: 'operation',
//   //   scopedSlots: { customRender: 'operation' }
//   // }
// ]
// const dataSource = [
//   {
//     key: 1,
//     name: '小明',
//     number: '001',
//     editable: false,
//     department: '行政部'
//   },
//   {
//     key: 2,
//     name: '李莉',
//     number: '002',
//     editable: false,
//     department: 'IT部'
//   },
//   {
//     key: 3,
//     name: '王小帅',
//     number: '003',
//     editable: false,
//     department: '财务部'
//   }
// ]

import { teachingGoupBy, teachingAdd } from "@/services/teaching-culture";
import FormEdit from "@/components/form/FormEdit";
import FooterToolBar from "@/components/tool/FooterToolBar";
// import TestClose from '@/utils/test'
// import TestClose from '@/main'

export default {
  name: "TeachingAdd",
  //   i18n: require('../i18n'),
  components: {
    FooterToolBar: FooterToolBar,
    FormEdit: FormEdit,
  },
  data() {
    return {
      phoneMessageColumns: phoneMessageColumns,
      annalsPhoneColumn: annalsPhoneColumn,
      annalsEmailColumn: annalsEmailColumn,
      followUpColumn:followUpColumn,
      // phoneMessage: [],
      // dataSource:dataSource,
      // columns:columns,
      groupList: [],
      form: this.$form.createForm(this),
      visible: false,
      loading1: false, //分类
      loading2: false, //提交
      title: "",
    };
  },
  computed: {
  },
  async created() {
    // this.closeTabs.$emit('test','msg');
    this.loading1 = true;
    teachingGoupBy().then((res) => {
      if (res.code == 200) {
        this.groupList = res.data;
        this.loading1 = false;
      }
    });
  },
  methods: {
    onSubmit(e) {
      // alert();
      //  alert(this.$router.history.current.fullPath);

      // this.$router.go(-1);//返回上一层
      // this.$router.push('/parent2/demo')
      // console.log(this.$router);
      // e.preventDefault();
      this.form.validateFields((err) => {
        console.log(err);
        // if (!err) {
        //   this.logging = true;
        //   const userName = this.form.getFieldValue("userName");
        //   const passWord = this.form.getFieldValue("passWord");
        //   login(userName, passWord).then(this.afterLogin);
        // }
      });
    },
    /**
     * 删除分组选项
     */
    deleteItem(index) {
      //   const index = this.groupList.indexOf(label)
      if (this.groupList[index]["title"] == this.title) {
        this.title = "";
      }
      this.groupList.splice(index, 1);
    },
    /**
     * 打开分组弹窗
     */
    addItemShow() {
      // alert()
      this.visible = true;
    },
    /**
     * 关闭分组弹窗
     */
    handleCancel() {
      this.visible = false;
    },
    validate() {
      // alert()

      // console.log();
      const { form, $message, $refs, $router } = this;
      let this_ = this;
      form.validateFields((err) => {
        if (err) {
          $message.error("信息填写有误");
          return;
        } else {
          // console.log(form.getFieldsValue());

          this.$confirm({
            title: "确定要添加吗?",
            // content: h => <div style="color:red;">Some descriptions</div>,
            async onOk() {
              this_.loading2 = true;
              let formData = form.getFieldsValue();
              formData["phoneMessage"] = JSON.stringify(
                $refs.phoneMessage.getArray()
              ); //工商手机号
              formData["annalsPhone"] = JSON.stringify(
                $refs.annalsPhone.getArray()
              ); //年报电话
              formData["annalsEmail"] = JSON.stringify(
                $refs.annalsEmail.getArray()
              ); //年报邮箱
               formData["followUp"] = JSON.stringify(
                $refs.followUp.getArray()
              ); //沟通跟进情况


              let res = await teachingAdd({ formData: formData });
              if (res.code == 200) {
                $message.success(res.message);
              }
              this_.loading2 = false;
              this_.closeTabs.$emit("closeTabs");
              $router.push("/enterprise/teachingCulture");
              // to: "/enterpriseManagement/teachingCulture",
            },
          });
        }
      });
    },
    handleCreate() {
      const form = this.$refs.collectionForm.form;
      form.validateFields((err, values) => {
        if (err) {
          return;
        }
        let check = true;
        for (let i = 0; i < this.groupList.length; i++) {
          if (this.groupList[i]["title"] == values.title) {
            this.$message.error("存在相同的名称");
            check = false;
            break;
          }
        }
        if (check) {
          this.$message.success("创建成功");
          this.groupList.push({ title: values.title, delete: true });
          this.title = values.title;
          form.resetFields();
          this.visible = false;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.aSelect {
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* border: 1px solid red; */
  align-items: center;
}

.card {
  margin-bottom: 24px;
}

.form {
  .form-row {
    margin: 0 -8px;
    //    display: flex;
    // justify-content: space-between;
  }
  .ant-col-md-12,
  .ant-col-sm-24,
  .ant-col-lg-6,
  .ant-col-lg-8,
  .ant-col-lg-10,
  .ant-col-xl-8,
  .ant-col-xl-6 {
    padding: 0 8px;
  }
}
</style>
